<template>
  <ma-crud ref="crudRef" :columns="columns" :options="crud">
    <template #search-clientKey="{ searchForm, component }">
      <a-input
        v-model.trim="searchForm[component.dataIndex]"
        :style="{ width: '240px' }"
        allow-clear
        placeholder="请输入客户端Key名称"
      >
        <template #prefix>
          <icon-search />
        </template>
      </a-input>
    </template>
  </ma-crud>
</template>
<script lang="ts" setup>
import { addClient, delClient, listClient, updateClient } from "@/api/system/client";

const crud = reactive({
  id: "clientId",
  pk: "clientId",
  title: "客户端查询",
  formLayout: "vertical",
  formOption: {
    width: 600,
    layout: [
      {
        formType: "grid",
        gutter: 16,
        cols: [
          { span: 12, formList: [{ dataIndex: "clientKey" }] },
          { span: 12, formList: [{ dataIndex: "clientSecret" }] },
          { span: 12, formList: [{ dataIndex: "grantTypeList" }] },
          { span: 12, formList: [{ dataIndex: "deviceType" }] },
          { span: 12, formList: [{ dataIndex: "activeTimeout" }] },
          { span: 12, formList: [{ dataIndex: "timeout" }] },
          { span: 12, formList: [{ dataIndex: "refreshTimeout" }] },
          { span: 12, formList: [{ dataIndex: "status" }] }
        ]
      }
    ]
  },
  api: listClient,
  showIndex: false,
  operationColumn: true,
  operationColumnAlign: "center",
  operationColumnWidth: 150,
  pageLayout: "normal",
  requestParams: { orderBy: "createTime", orderType: "desc" },
  add: { api: addClient, auth: ["system:client:add"], text: "新增", show: true },
  delete: { api: delClient, auth: ["system:client:delete"], text: "删除", show: true },
  edit: { api: updateClient, auth: ["system:client:edit"], text: "编辑", show: true }
});

const columns = reactive([
  {
    title: "客户端编号",
    dataIndex: "clientId",
    align: "center",
    hide: true
  },
  {
    title: "客户端Key",
    dataIndex: "clientKey",
    align: "center",
    search: true,
    commonRules: {
      required: true,
      message: "请输入客户端Key"
    }
  },
  {
    title: "客户端密钥",
    dataIndex: "clientSecret",
    align: "center",
    commonRules: {
      required: true,
      message: "请输入客户端密钥"
    }
  },
  {
    title: "授权类型",
    dataIndex: "grantTypeList",
    align: "center",
    formType: "select",
    dict: {
      name: "sys_grant_type",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    },
    commonRules: {
      required: true,
      message: "请选择授权类型"
    }
  },
  {
    title: "设备类型",
    dataIndex: "deviceType",
    align: "center",
    formType: "select",
    dict: {
      name: "sys_device_type",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    },
    commonRules: {
      required: true,
      message: "请选择设备类型"
    }
  },
  {
    title: "Token活跃超时时间",
    dataIndex: "activeTimeout",
    tooltip: "指定时间无操作则过期(单位:秒),默认30分钟(1800秒)",
    align: "center"
  },
  {
    title: "Token固定超时时间",
    dataIndex: "timeout",
    tooltip: "固定时间必定过期(单位:秒),默认7天(604800秒)",
    align: "center"
  },
  {
    title: "RefreshToken固定超时时间",
    dataIndex: "refreshTimeout",
    tooltip: "固定时间必定过期(单位:秒),默认7天(604800秒)",
    align: "center"
  },
  {
    title: "客户端状态",
    dataIndex: "status",
    align: "center",
    formType: "radio",
    dict: {
      name: "sys_normal_disable",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    },
    addDefaultValue: 0
  }
]);
</script>
